<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper-container">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500"
				:circular="true">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="item.imgSrc" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperList: [] // 轮播图数据
		}
	},
	onLoad() {
		this.getSwiperData();
	},
	methods: {
	async getSwiperData() {
			const res = await uni.request({
				url: 'http://localhost:8080/home/swiper',
				method: 'GET'
			});

			if (res.statusCode === 200) {
				let dataList = res.data.body || res.data.data || res.data || [];
					// 处理图片路径，拼接完整域名
				this.swiperList = dataList.map(item => ({
					...item,
					imgSrc: item.imgSrc.startsWith('http') ? item.imgSrc : 'http://localhost:8080' + item.imgSrc
				}));
			}
		}
	}
}
</script>

<style scoped>
.content {
	width: 100%;
	background-color: #F6F5F6;
}

.swiper-container {
	width: 100%;
/* 	padding: 20rpx; */
	box-sizing: border-box;
}

.swiper {
	width: 100%;
	height: 350rpx;
	/* border-radius: 10rpx; */
	overflow: hidden;
}

.swiper-image {
	width: 100%;
	height: 100%;
}
</style>